@import "media.scss";

body{
    max-width: 640px;
    min-width: 320px;
    width: 100%;
}

.header{
    width: 100%;
    height: (42/20)+rem;
    background-color: #FF841D;
    justify-content: space-between;
    align-items:center;
    display: flex;
   
        
     
    span{
     color: #fff;
     font-size: 1rem;      
    }
    span:nth-of-type(1){
        padding-left: 10px;         
    }
    span:nth-of-type(2){
        font-weight:bold;
    }

    div{
        width: (42/20)+rem;
        padding-right: 10px;
    }
    img{
      display: block;
      width: 100%;       
    }
}

.lon{
    //  padding: 2rem 1rem;
    // margin: 1rem;
  >ul{
      width: 100%;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      justify-content: space-between;
      li{
          flex: 2;
           flex-wrap: wrap;
          width:  50%;
          height: 280/20+rem;
          border-bottom:1px solid #eee;
          text-align: center;
         
         
          
            img{
             padding:1.5rem;
             padding-bottom: 10/20+rem;
             width: 186/20+rem;
             height: 8.6rem;                   
         }
            p{
             font-size: 16/20+rem;
             color:#000;
             text-align: left;
            //  padding-left: 10/20+rem;
             letter-spacing:-1/20+rem;
             padding: 5/20+rem 5/20+rem 0 10/20+rem;
            }
            p:nth-of-type(1){
                
               width:186/20+rem;   
                overflow : hidden;   
                text-overflow: ellipsis;   
                display: -webkit-box;   
                -webkit-line-clamp: 2;   
                -webkit-box-orient: vertical;
            
            }
            p:nth-of-type(2){
              color:#ff6c00;
              height: 30/20+rem;
               width:186/20+rem;   
                overflow : hidden;   
                text-overflow: ellipsis;   
                display: -webkit-box;   
                -webkit-line-clamp: 1;   
                -webkit-box-orient: vertical;
            }
             p:nth-of-type(3){
              font-size: 12/20+rem;
              color:#a1a1a1;
              padding-bottom: 5/20+rem;
              
              
             
              
            }
      }
        li:nth-of-type(odd){
            border-right: 1px solid #eee;
         }

  }
  
     
      
   
    
}


.nav{
    margin-top:25/20+rem;
    width:100%;
    ul{
        width:100%;
        display: flex;
        li{
            flex:2;
            height:34/20+rem;
            background-color: #efefef;
            border-bottom:1px solid #c4c4c4;
            line-height:34/20+rem;
            text-align: center;
        }
        li:last-of-type{
            flex:3;
        }
        li:nth-of-type(2){
            border-left:1px solid #c4c4c4;
            border-right:1px solid #c4c4c4;
        }
    }


}
.footer{
    width:100%;
    background-color: #efefef;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding:16/20+rem 0;
    span:nth-of-type(1){
        color:#ff0000;
    }
    span:nth-of-type(2){
        color:#000000;
    }
    span:nth-of-type(3){
        color:#666666;
    }
}